<template>
  <view class="detail-container">
    <!-- 头部导航 -->
    <view class="header">
      <view class="back-btn" @click="goBack">←</view>
      <view class="title">案件详情</view>
      <view class="header-actions">
        <view class="action-btn" @click="shareCase">⇲</view>
        <view class="action-btn" @click="showMenu">⋮</view>
      </view>
    </view>

    <!-- 案件头部信息 -->
    <view class="case-header">
      <view class="case-tag" :class="'tag-' + caseData.type">
        {{ getTypeText(caseData.type) }}
      </view>
      <view class="case-title">{{ caseData.title }}</view>
      <view class="update-time">更新于 {{ caseData.updateTime }}</view>
    </view>

    <!-- 客户信息 -->
    <view class="info-section">
      <view class="section-header">
        <text class="section-icon">👤</text>
        <text class="section-title">客户信息</text>
      </view>
      <view class="info-content">
        <view class="info-row">
          <text class="info-label">姓名:</text>
          <text class="info-value">{{ caseData.client.name }}</text>
        </view>
        <view class="info-row">
          <text class="info-label">电话:</text>
          <text class="info-value">{{ caseData.client.phone }}</text>
          <text class="phone-icon" @click="callClient">📞</text>
        </view>
        <view class="info-row">
          <text class="info-label">地址:</text>
          <text class="info-value">{{ caseData.client.address }}</text>
        </view>
        <view class="info-row">
          <text class="info-label">分享人:</text>
          <text class="info-value">{{ caseData.sharer }}</text>
        </view>
      </view>
    </view>

    <!-- 案件描述 -->
    <view class="info-section">
      <view class="section-header">
        <text class="section-icon">📄</text>
        <text class="section-title">案件描述</text>
      </view>
      <view class="case-description">
        <text>{{ caseData.description }}</text>
      </view>
    </view>

    <!-- 证据材料 -->
    <view class="info-section">
      <view class="section-header">
        <text class="section-icon">📁</text>
        <text class="section-title">证据材料</text>
        <text class="file-count">共{{ caseData.evidence.length }}份</text>
      </view>
      <view class="evidence-list">
        <view 
          class="evidence-item" 
          v-for="(file, index) in caseData.evidence" 
          :key="index"
          @click="downloadFile(file)"
        >
          <view class="file-info">
            <text class="file-name">{{ file.name }}</text>
            <text class="file-size">{{ file.size }}</text>
          </view>
          <text class="download-icon">⬇</text>
        </view>
      </view>
    </view>

    <!-- 底部操作栏 -->
    <view class="bottom-actions">
      <view class="contact-btn" @click="callClient">
        <text class="btn-icon">📞</text>
        <text class="btn-text">联系客户</text>
      </view>
      <view class="action-btn" @click="editCase">
        <text class="btn-icon">✏️</text>
      </view>
      <view class="action-btn" @click="showMenu">
        <text class="btn-icon">…</text>
      </view>
    </view>
  </view>
</template>

<script>
import { getCaseById } from '../../src/services/caseService.js'

export default {
  data() {
    return {
      caseId: '',
      caseData: {
        id: '',
        title: '',
        type: 'civil',
        updateTime: '',
        client: {
          name: '',
          phone: '',
          address: ''
        },
        sharer: '',
        description: '',
        evidence: []
      }
    }
  },
  onLoad(options) {
    this.caseId = options.id
    this.loadCaseData()
  },
  methods: {
    loadCaseData() {
      // 模拟数据
      this.caseData = {
        id: this.caseId,
        title: '张三与李四合同纠纷案件',
        type: 'civil',
        updateTime: '2023-10-15',
        client: {
          name: '张三',
          phone: '13812345678',
          address: '北京市朝阳区建国路88号'
        },
        sharer: '王律师(北京市某某律师事务所)',
        description: '原告张三与被告李四于2023年1月5日签订《房屋租赁合同》，约定被告将位于北京市朝阳区的一处房产出租给原告，租期2年，月租金12000元。原告按约定支付了押金24000元及首期租金12000元，但被告未按合同约定交付房屋，且拒绝退还押金和租金。经多次协商未果，原告决定通过法律途径解决。\n\n原告请求：\n1. 解除《房屋租赁合同》；\n2. 判令被告退还押金24000元及租金12000元；\n3. 判令被告支付违约金24000元；\n4. 本案诉讼费用由被告承担。',
        evidence: [
          { name: '房屋租赁合同.pdf', size: '2.4 MB' },
          { name: '房屋照片.jpg', size: '1.2 MB' },
          { name: '付款凭证.docx', size: '865 KB' },
          { name: '聊天记录.pdf', size: '1.8 MB' },
          { name: '其他证据.zip', size: '3.2 MB' }
        ]
      }
    },
    getTagClass(type) {
      return `tag-${type}`
    },
    getTypeText(type) {
      const typeMap = {
        civil: '民事案件',
        criminal: '刑事案件',
        admin: '行政案件'
      }
      return typeMap[type] || '其他案件'
    },
    goBack() {
      uni.navigateBack()
    },
    shareCase() {
      uni.navigateTo({ url: `/pages/share/share?caseId=${this.caseId}` })
    },
    showMenu() {
      uni.showActionSheet({
        itemList: ['编辑案件', '删除案件', '导出案件'],
        success: (res) => {
          const actions = ['edit', 'delete', 'export']
          this.handleMenuAction(actions[res.tapIndex])
        }
      })
    },
    handleMenuAction(action) {
      switch (action) {
        case 'edit':
          this.editCase()
          break
        case 'delete':
          this.deleteCase()
          break
        case 'export':
          this.exportCase()
          break
      }
    },
    editCase() {
      uni.navigateTo({ url: `/pages/cases/create?id=${this.caseId}&mode=edit` })
    },
    deleteCase() {
      uni.showModal({
        title: '确认删除',
        content: '确定要删除这个案件吗？',
        success: (res) => {
          if (res.confirm) {
            uni.showToast({ title: '删除成功', icon: 'success' })
            setTimeout(() => {
              uni.navigateBack()
            }, 500)
          }
        }
      })
    },
    exportCase() {
      uni.showToast({ title: '导出功能开发中', icon: 'none' })
    },
    callClient() {
      uni.makePhoneCall({
        phoneNumber: this.caseData.client.phone
      })
    },
    downloadFile(file) {
      uni.showToast({ title: `下载${file.name}`, icon: 'success' })
    }
  }
}
</script>

<style>
.detail-container {
  min-height: 100vh;
  background: #f7f8fa;
  padding-bottom: 120rpx;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx;
  background: #fff;
  border-bottom: 2rpx solid #f1f5f9;
}

.back-btn {
  font-size: 32rpx;
  color: #3b82f6;
}

.title {
  font-size: 36rpx;
  font-weight: 600;
  color: #1f2937;
}

.header-actions {
  display: flex;
  gap: 24rpx;
}

.action-btn {
  font-size: 28rpx;
  color: #6b7280;
}

.case-header {
  background: #fff;
  padding: 32rpx 24rpx;
  margin-bottom: 16rpx;
}

.case-tag {
  display: inline-block;
  padding: 8rpx 20rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
  font-weight: 500;
  margin-bottom: 16rpx;
}

.tag-civil {
  background: #dbeafe;
  color: #1d4ed8;
  border: 2rpx solid #3b82f6;
}

.case-title {
  font-size: 36rpx;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 12rpx;
  line-height: 1.4;
}

.update-time {
  font-size: 24rpx;
  color: #9ca3af;
}

.info-section {
  background: #fff;
  margin-bottom: 16rpx;
  padding: 32rpx 24rpx;
}

.section-header {
  display: flex;
  align-items: center;
  margin-bottom: 24rpx;
}

.section-icon {
  font-size: 28rpx;
  margin-right: 12rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #1f2937;
  flex: 1;
}

.file-count {
  font-size: 24rpx;
  color: #6b7280;
}

.info-content {
  padding-left: 40rpx;
}

.info-row {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
  position: relative;
}

.info-label {
  font-size: 28rpx;
  color: #6b7280;
  width: 120rpx;
}

.info-value {
  font-size: 28rpx;
  color: #1f2937;
  flex: 1;
}

.phone-icon {
  font-size: 24rpx;
  color: #3b82f6;
  margin-left: 16rpx;
}

.case-description {
  padding-left: 40rpx;
}

.case-description text {
  font-size: 28rpx;
  color: #1f2937;
  line-height: 1.6;
}

.evidence-list {
  padding-left: 40rpx;
}

.evidence-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 0;
  border-bottom: 2rpx solid #f1f5f9;
}

.evidence-item:last-child {
  border-bottom: none;
}

.file-info {
  flex: 1;
}

.file-name {
  display: block;
  font-size: 28rpx;
  color: #1f2937;
  margin-bottom: 8rpx;
}

.file-size {
  font-size: 24rpx;
  color: #9ca3af;
}

.download-icon {
  font-size: 24rpx;
  color: #3b82f6;
}

.bottom-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  padding: 24rpx;
  display: flex;
  align-items: center;
  gap: 24rpx;
  border-top: 2rpx solid #f1f5f9;
}

.contact-btn {
  flex: 1;
  height: 80rpx;
  background: #3b82f6;
  border-radius: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12rpx;
}

.btn-icon {
  font-size: 24rpx;
  color: #fff;
}

.btn-text {
  font-size: 28rpx;
  color: #fff;
  font-weight: 600;
}

.action-btn {
  width: 80rpx;
  height: 80rpx;
  background: #f9fafb;
  border-radius: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.action-btn .btn-icon {
  color: #6b7280;
}
</style>
